/* 查询选择,查询选择(大) */
<template>
  <div class="gridselect-config">
    <je-form-item label="展示方式" name="inputType">
      <je-select
        v-model:value="formState.inputType"
        :options="[
          { value: 'input', label: '文本框' },
          { value: 'textarea', label: '文本域' },
        ]"
      >
      </je-select>
    </je-form-item>

    <je-form-item label="可选可输入" name="optionalAndInput">
      <je-switch v-model:value="formState.optionalAndInput" mode="checkbox" />
      <!-- <je-checkbox v-model:checked="formState.optionalAndInput" /> -->
      <span class="prompt">启动后可以通过选择写入也可以直接写入。</span>
    </je-form-item>

    <je-form-item label="可穿透" name="penetrate">
      <je-switch v-model:value="formState.penetrate" mode="checkbox" />
      <span class="prompt">可以穿透到表单(注意配置唯一性字段)。</span>
    </je-form-item>

    <je-form-item name="pkName">
      <template #label>
        <div class="iconWrap">
          <i
            class="fas fa-question-circle"
            style="color: #ebebeb"
            :style="changeColor(unitTipShow)"
            @click="
              clickTipView({
                title: '唯一',
                unitTpl: ONLY_UNITPLE,
              })
            "
            @mouseenter="unitTipShow = true"
            @mouseleave="unitTipShow = false"
          />
          唯一
        </div>
      </template>
      <je-select v-model:value="formState.pkName" :options="pkNameOptions"> </je-select>
    </je-form-item>

    <je-form-item label="弹出面板宽" name="winWidth">
      <je-input-number
        v-model:value="formState.winWidth"
        addon-after="px"
        style="width: 100%"
        :min="0"
      />
    </je-form-item>

    <je-form-item label="弹出面板高" name="winHeight">
      <je-input-number
        v-model:value="formState.winHeight"
        addon-after="px"
        style="width: 100%"
        :min="0"
      />
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Form, Switch, InputNumber, Select, Modal } from '@jecloud/ui';
  import { decode, isNotEmpty } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import { ONLY_UNITPLE } from '@/helper/tip-constant';

  export default defineComponent({
    name: 'GridselectConfig',
    components: {
      JeFormItem: Form.Item,
      JeInputNumber: InputNumber,
      JeSwitch: Switch,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      configInfo: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        optionalAndInput: config.optionalAndInput, //可选可输入
        penetrate: config.penetrate, //可穿透
        inputType: config.inputType || 'input', //展示方式
        pkName: config.pkName || '', //回显过滤字段
        winWidth: config.winWidth || '', //弹出面板宽
        winHeight: config.winHeight || '', //弹出面板宽高
      });
      const unitTipShow = ref(false);

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //下拉框数据
      const pkNameOptions = ref([]);
      //根据configInfo的数据更新下拉框的数据
      const setOtherConfig = (configInfo) => {
        if (isNotEmpty(configInfo)) {
          const configData = configInfo.split(',');

          if (isNotEmpty(configData[2])) {
            const nodeCodes = configData[2].split('~');
            if (nodeCodes.length > 0) {
              const nodeFieldArray = [];
              //数据去重
              const newCodes = [...new Set(nodeCodes)];
              newCodes.forEach((code) => {
                nodeFieldArray.push({ value: code, label: code });
              });
              if (nodeFieldArray.length > 0) {
                pkNameOptions.value = nodeFieldArray;
              }
            }
          }
        }
      };

      const changeColor = (flag) => {
        if (flag) {
          return 'cursor:pointer;color: #3265F5';
        }
        return 'cursor:pointer;';
      };
      const clickTipView = (obj) => {
        // state.modalShow = true;
        // state.mouseNowData = obj;
        Modal.alert({
          content: obj.unitTpl,
          title: obj.title,
          icon: 'fal fa-info-circle',
          status: 'info',
          width: '460',
        });
      };
      watch(
        () => props.configInfo,
        () => {
          setOtherConfig(props.configInfo);
        },
        { deep: true.valueOf, immediate: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
        setOtherConfig,
      });

      return { formState, pkNameOptions, ONLY_UNITPLE, changeColor, unitTipShow, clickTipView };
    },
  });
</script>
<style lang="less" scoped></style>
